<!--
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-26 09:17:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/pages/loanDetails.vue
 -->
<template>
	<view class="loan-details-page">
		<!-- banner简介 -->
		<view class="top-bg">
			<!-- <image class="top-bgimg" src="../static/img/j_icon5.png" mode="widthFix" lazy-load="false"></image> -->
			<view class="banner-title">
				<view class="logo">
					<image :src="hostIp+loanDetails.image" mode="scaleToFill" lazy-load="false">
					</image>
					<view class="title">{{loanDetails.name}}</view>
				</view>
				<view class="intro">
					<view class="shenqing">已{{loanDetails.readyLoan}}人已通过申请</view>
				</view>
			</view>
			<!-- 贷款金额 -->
			<view class="load-count">
				<view class="jine">
					<view>贷款金额</view>
					<text>{{loanDetails.amount}}万</text>
				</view>
				<view class="lilv">
					<view v-if='loanDetails.loanType==0' class="title">通过率：</view>
					<view v-else class="title">贷款利率：</view>
					<view class="limit">{{loanDetails.rate}}%</view>
					<view class="line"></view>
					<view class="count">{{loanDetails.content}}</view>
				</view>
			</view>
		</view>
		<!-- 办理流程 -->
		<!-- <view class="flow">
			<view class="sub-title">
				<view class="line"></view>
				<view>办理流程</view>
			</view>
			<view class="flow-module">
				<view class="item" v-for="(item,index) in moduleList" :key="index">
					<view class="module">
						<view class="h-70">
							<image :src="item.img" mode="scaleToFill" lazy-load="false">
							</image>
						</view>
						<view class="module-text">{{item.moduleText}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 办理流程说明 -->
		<view class="explain" v-for="(item,idx) in kindList" :key="idx">
			<view class="sub-title">
				<view class="line"></view>
				<view>{{item.name}}</view>
			</view>
			<view class="kind-list">
				<view class="item">
					<text style="line-height: 38upx" v-if="idx==0">{{loanDetails.conditions}}</text>
					<text style="line-height: 38upx" v-if="idx==1">{{loanDetails.material}}</text>
					<text style="line-height: 38upx" v-if="idx==2">{{loanDetails.detailDesc}}</text>
				</view>
			</view>
		</view>
		<!--产品 -->
		<view class="product">
			<view class="sub-title">
				<view class="line"></view>
				<view>猜你喜欢</view>
			</view>
			<Product :productList="loanDetails.userLike" loanType="like" />
		</view>
		<!-- 底部导航栏 -->
		<BottomBtn :isTag="!isTag" :link="loanDetails.link" :loanId="loanDetails.id" :cid="loanDetails.id" />
	</view>
</template>
<script>
	import Product from "@/components/product/productnew.vue";
	import BottomBtn from "@/components/bottomButton/bottomButton.vue";
	import InterServer from "@/common/config/server"
	import Vue from 'vue'
	export default {
		components: {
			Product,
			BottomBtn
		},
		data() {
			return {
				hostIp: Vue.globalData.hostIp,
				id: "",
				loanDetails: {
					amount: 0,
					rate: 0,
				},
				productList: [],
				isTag: false,
				pageNum: 0,
				pageSize: 5,
				moduleList: [{
					img: "../static/images/loan_module_1.png",
					moduleText: "在线申请",
				}, {
					img: "../static/images/loan_module_2.png",
					moduleText: "电话申请",
				}, {
					img: "../static/images/loan_module_3.png",
					moduleText: "门店办理",
				}, {
					img: "../static/images/loan_module_4.png",
					moduleText: "审批放款",
				}],
				kindList: [{
						id: 1,
						name: '申请条件',
						open: true,
						content: ["1、年龄22-60周岁； 2、信用条件：连3累16；3、房产条件：天津全境；", "4、房龄要求：30年以内；  5、面积要求：40平米以上；",
							"6、抵押物类型：住宅，别墅，经济适用房，非居住，底商公寓等。"
						],
					},
					{
						id: 2,
						name: '所需材料',
						open: true,
						content: ["身份证，户口证明，婚姻证明，房本，征信，权属，流水，收入证明，其他资产证明"],
					},
					{
						id: 3,
						name: '详细说明',
						open: true,
						content: ["一抵最高7成，先息后本，等额本息"],
					}
				]
			}
		},
		onLoad(options) {
			let that = this;
			if (options.id) {
				that.id = options.id
			}
			that.getLoanDetails() //产品详情
			that.getLoanAll() //获取所有贷款信息
		},
		onShow() {
			// #ifdef H5
			document.title = `贷款详情`
			// #endif
		},
		methods: {
			getLoanDetails() {
				InterServer.getLoanDetails({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.loanDetails = res.data
						console.log(this.loanDetails)
						this.kindList[0].list = res.data.conditions
						this.kindList[1].list = res.data.material
						this.kindList[2].list = res.data.detailDesc
					}
				})
			},
			//获取所有贷款信息
			getLoanAll() {
				Vue.showCustomLoading()
				InterServer.getLoanAll({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					loanType: ""
				}).then(res => {
					uni.hideLoading();
					this.productList = [...res.data.dataList]
				})
			},

		}
	}
</script>
<style lang="less" scoped>
	.loan-details-page {

		// banner简介
		.top-bg {
			width: 100%;
			height: 292upx;
			background: linear-gradient(134deg, rgba(255, 153, 0, 1) 0%, rgba(255, 119, 0, 1) 100%);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			overflow: hidden;
			position: relative;

			.top-bgimg {
				width: 273upx;
				position: absolute;
				right: 10upx;
				bottom: 0upx;
				z-index: 0;
			}

			.banner-title {
				z-index: 10;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26upx;
				height: 80upx;
				margin-top: 18upx;
				margin: 20upx 32upx 0;
				border-bottom: 1upx solid rgba(255, 255, 255, 0.6);

				.logo {
					margin-right: 17upx;
					margin-left: 30upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					image {
						width: 48upx;
						height: 48upx;
					}
				}

				.intro {
					display: flex;
					align-items: center;
				}

				.title {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 600;
					line-height: 33px;
					margin-left: 10upx;
					color: rgba(255, 255, 255, 1);
				}

				.shenqing {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: rgba(255, 255, 255, 1);
					line-height: 60upx;
					margin-right: 20upx;
				}
			}

			// 贷款金额
			.load-count {
				background: url('../static/img/j_icon5.png') 490upx 15upx no-repeat;
				background-size: 273upx 273upx;
				height: 189upx;
				
				.lilv{
					margin: 0 0 0 50upx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30Upx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					font-weight: 600;
					.line{
						width: 2upx;
						height: 30upx;
						background: rgba(255, 255, 255, 1);
						margin: 0 40upx;
					}
				}

				.jine {
					margin: 0 50upx;
					view {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(255, 255, 255, 1);
						margin-top: 10upx;
					}

					text {
						font-size: 64upx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(255, 255, 255, 1);
					}
				}

				.box {
					display: flex;
					font-family: PingFang-Semibold;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
					justify-content: space-between;
					align-items: center;

					.title {
						height: 42Upx;
						font-size: 30Upx;
						line-height: 42upx;
					}

					.limit {
						height: 67upx;
						font-size: 48upx;
						line-height: 67upx;
					}

					.count {
						height: 33upx;
						font-size: 24upx;
						font-family: PingFang-Semibold;
						font-weight: 400;
						line-height: 33upx;
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}

		.sub-title {
			display: flex;
			align-items: center;
			margin: 24upx 0 20upx;

			.line {
				width: 4upx;
				height: 22upx;
				background: rgba(255, 156, 0, 1);
				margin-right: 12upx;
				margin-left: 7upx;
			}

			height:42upx;
			background:rgba(204,204,204,0.2);
			font-size:26upx;
			font-family:PingFang-Semibold;
			font-weight:bold;
			color:rgba(51, 51, 51, 1);
		}

		// 办理流程
		.flow {
			background: #ffffff;
			padding: 0 24upx;

			.title {
				font-size: 30upx;
				color: #333333;
				padding-bottom: 40upx;
			}

			.flow-module {
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					justify-content: space-between;
				}

				.module {
					width: 120upx;
					text-align: center;

					image {
						width: 73upx;
						height: 70upx;
					}

					&-text {
						padding: 8upx 0 0 20upx;
						height: 33upx;
						font-size: 24upx;
						font-family: PingFang-Semibold;
						font-weight: bold;
						line-height: 33upx;
						color: rgba(124, 124, 124, 1);
					}
				}
			}
		}

		//办理流程说明
		.explain {
			padding: 0 24upx 0;
			background: #ffffff;
			margin-bottom: 20upx;

			.kind {
				&-list {
					font-size: 28upx;

					.item {
						font-size: 26upx;
						font-weight: 400;
						line-height: 25upx;
						color: rgba(50, 50, 50, 1);
						padding-left: 24upx;
					}
				}
			}

			.kind-list-item-hd {
				display: none;
				transition: opacity .3s;
			}

			.kind-arrow-rotate {
				-webkit-transform: rotateZ(180deg);
				-moz-transform: rotateZ(180deg);
				-o-transform: rotateZ(180deg);
				-ms-transform: rotateZ(180deg);
				transform: rotateZ(180deg);
				margin-left: 10upx;
			}
		}

		//产品
		.product {
			margin-bottom: 120upx;
			background: #ffffff;
			padding: 0 0upx 100upx;

			.sub-title {
				padding: 0 24upx;
			}

		}
	}
</style>
